figure.highlight
  margin: 0 0 16px 0
  padding: 16px
  font-size: 16px
  line-height: 1.45
  background-color: $grey-lighter
  border-radius: 3px
  word-wrap: normal

  pre
    margin: 0
    font-size: 85%

  .line
    height: 20px
    font-szie: 100%
    word-break: normal

  .gutter
    display: none

pre
  margin-top: 0;
  margin-bottom: 0;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 12px;
  line-height: normal;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  @media (max-width: $screen-sm)
    font-family: Consolas, "Liberation Mono", Courier, monospace

.highlight
  display: block
  background: white
  padding: 0.5em
  color: #333333
  overflow-x: auto

  .comment, .meta
    color: #969896

  .string, .variable, .template-variable, .strong, .emphasis, .quote
    color: #df5000

  .keyword, .selector-tag, .type
    color: #a71d5d

  .literal, .symbol, .bullet, .attribute
    color: #0086b3

  .section, .name
    color: #63a35c

  .tag
    color: #333333

  .title, .attr, .selector-id, .selector-class, .selector-attr, .selector-pseudo
    color: #795da3

  .addition
    color: #55a532
    background-color: #eaffea

  .deletion
    color: #bd2c00
    background-color: #ffecec

  .link
    text-decoration: underline